<template>
  <div class="wrap">
    <div id="page">
      <!-- 头部 -->
      <header>
        <v-back></v-back>
        <h2>购物车</h2>
        <p>
          <span class="iconfont">&#xf0112;</span>
          <span class="iconfont">&#xe71e;</span>
          <i></i>
        </p>
      </header>
      <!-- 导航 -->
      <nav>
        <a href="#">全部(20)</a>
        <a href="#">降价(4)</a>
        <a href="#">常卖(2)</a>
        <a href="#">分类</a>
      </nav>
      <!-- 主体 -->
      <main>
        <!-- 小U自营 -->
        <!-- <p id="store">
          <input type="checkbox" />
          <span>小U自营</span><em>已免运费</em><b></b><a href="#">领券</a>
        </p> -->
        <p v-show="cartList.length == 0" class="showCart">购物车还没有东西噢！</p>
        <ul class="self">
          <li v-for="item in cartList" :key="item.id">
            <input
              type="checkbox"
              v-model="item.isTrue"
              @change="changeOne()"
            />
            <img :src="$pre + item.img" alt="" />
            <div class="content">
              <h3>{{ item.goodsname }}</h3>
              <p class="limit">比加入时降低￥100</p>
              <p class="price">
                <em>￥</em><i>{{ item.price }}</i
                ><del>￥{{ item.price + 100 }}</del>
                <button @click="pre(item.id)">-</button>
                <span>{{ item.num }}</span>
                <button @click="add(item.id)">+</button>
              </p>
              <van-icon
                name="cross"
                class="del"
                size="20"
                @click="del(item.id)"
              />
            </div>
          </li>
        </ul>
        <!-- 品牌精选 -->
        <!-- <p id="store">
          <i></i><span>品牌精选</span><em>已免运费</em><b></b
          ><a href="#">领券</a>
        </p>
        <ul class="sift">
          <li>
            <b></b>
            <img src="../../assets/images/shop_bg1.png" alt="" />
            <div class="commodity">
              <h3>多芬男士+护理净油洁面泡...</h3>
              <p>击退油光,净在掌握,有效控油...</p>
              <p class="price">
                <em>￥</em><i>999</i> <del>￥1099</del>999人已付款
              </p>
              <p class="limit">11.11限时299元起</p>
              <p><span>999条评论</span>99.9%好评</p>
            </div>
          </li>
        </ul> -->
      </main>
      <!-- 结算 -->
      <div id="close">
        <p>
          <input type="checkbox" v-model="isAll" @change="changeAll()" />
          全选<span class="center"><em>合计</em>已免运费</span
          ><span
            ><b>￥{{ price }}</b
            >已优惠￥{{ youhui }}元</span
          >
        </p>
        <!-- <router-link :to="{name:'order',params:{userInfo:userInfo}}" @click="submit">结算</router-link> -->
        <a href="#" @click.prevent="submit">结算</a>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
import { cartList, cartEdit, cartDelete, orderAdd } from "../../request/api";
export default {
  data() {
    return {
      userInfo: sessionStorage.getItem("token")
        ? JSON.parse(sessionStorage.getItem("token"))
        : {},
      cartList: [],
      //全选复选框
      isAll: false,
    };
  },
  methods: {
    ...mapActions({}),
    add(id) {
      cartEdit({ id: id, type: 2 }).then((res) => {
        // 我们为了避免资源浪费，直接将这一条商品的num值加1就好了，没有必要重新请求列表数据。
        if (res.data.code == 200) {
          let index = this.cartList.findIndex((item) => {
            return (id = item.id);
          });
          this.cartList[index].num++;
        }
      });
    },
    pre(id) {
      cartEdit({ id: id, type: 1 }).then((res) => {
        if (res.data.code == 200) {
          let index = this.cartList.findIndex((item) => item.id == id);
          if (this.cartList[index].num > 1) {
            this.cartList[index].num--;
          }
        }
      });
    },
    del(id) {
      cartDelete({ id: id }).then((res) => {
        if (res.data.code == 200) {
          this.Toast.success("删除成功");
          cartList({ uid: this.userInfo.uid }).then((res) => {
            let index = this.cartList.findIndex((item) => {
              return item.id == id;
            });
            this.cartList.splice(index, 1);
            this.changeOne();
          });
        } else {
          this.Toast.fail("删除失败");
        }
      });
    },
    //点击小复选框循环看其他是否被选中
    changeOne() {
      this.isAll = this.cartList.every((item) => {
        return item.isTrue;
      });
    },
    //让每个小复选框跟随全选框走
    changeAll() {
      this.cartList.forEach((item) => {
        item.isTrue = this.isAll;
      });
    },
    submit() {
      let arr = this.cartList.filter((item) => {
          // return { id: item.id, num: item.num, price: item.price };
          return item.isTrue
      });
      let id = arr.map(item=>{
        return item.id
      })
        sessionStorage.setItem("goods",JSON.stringify(arr))
      //结算跳转到订单页
      this.$router.push("/order/"+id)
    },
  },
  computed: {
    ...mapGetters({}),
    //在这里计算商品价格和总价
    price() {
      let sum = 0;
      this.cartList.forEach((item) => {
        if (item.isTrue) {
          sum += item.num * item.price;
        }
      });
      return sum;
    },
    youhui() {
      let sum = 0;
      this.cartList.forEach((item) => {
        if (item.isTrue) {
          sum += 100;
        }
      });
      return sum;
    },
  },
  mounted() {
    if (this.userInfo.token) {
      // console.log(this.userInfo.uid);
      cartList({ uid: this.userInfo.uid }).then((res) => {
        // let arr = res.data.list
          res.data.list.map((item) => {
            item.isTrue = false;
          });
          this.cartList = res.data.list;
      });
    } else {
      this.Toast.fail("对不起，您还未登录");
      this.$router.push("/login");
    }
  },
};
</script>

<style scoped>
.del {
  float: right;
  margin-top: 0.5rem;
}
.showCart{
  text-align: center;
  line-height: 9rem;
  font-size: .4rem;
  color: #ccc;
}
div.content h3 {
  width: 3rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
input {
  position: relative;
  appearance: none;
  width: 0.32rem;
  height: 0.32rem;
  margin-right: 0.15rem;
  vertical-align: middle;
  border: 1px solid #ff6040;
  border-radius: 50%;
}
input[type="checkbox"]:checked:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0.2rem;
  height: 0.2rem;
  background-color: #f00;
  border-radius: 50%;
}
html,
body,
#page {
  height: 100%;
}
#page {
  max-width: 7.5rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.wrap {
  height: 93vh;
}
header {
  height: 0.8rem;
  background: #ff6040;
  display: flex;
  color: #ffdfd8;
  padding: 0.3rem 0.12rem 0.12rem 0.33rem;
  align-items: center;
}
header h2 {
  font-size: 0.3rem;
  margin: 0 1.5rem 0 2.5rem;
}
header p {
  width: 1.72rem;
  height: 0.62rem;
  border: 1px solid #ff876c;
  border-radius: 0.31rem;
  line-height: 0.62rem;
  display: flex;
  justify-content: space-between;
  position: relative;
}
header p span {
  width: 0.86rem;
  text-align: center;
}
header p i {
  width: 1px;
  height: 0.37rem;
  background: #ff876c;
  position: absolute;
  left: 0.86rem;
  top: 0.12rem;
}
nav {
  padding: 0.2rem 0.74rem 0.17rem 0.68rem;
  background: linear-gradient(#ff6040, #ff8071);
  display: flex;
  justify-content: space-between;
  font-size: 0.26rem;
}
nav a {
  color: #fff;
}
main {
  flex: 1;
  overflow: auto;
}
#store {
  height: 0.72rem;
  background: #fff;
  padding: 0 0.2rem;
  display: flex;
  align-items: center;
  margin-bottom: 0.2rem;
}
#store i {
  width: 0.32rem;
  height: 0.32rem;
  border: 1px solid #999999;
  border-radius: 50%;
  background: #f2f2f2;
  margin-right: 0.21rem;
}
#store span {
  font-size: 0.3rem;
  color: #333333;
  font-weight: bold;
  margin-right: 3.19rem;
}
#store em {
  font-size: 0.22rem;
  color: #333333;
}
#store b {
  width: 0.02rem;
  height: 0.22rem;
  background: #979797;
  margin: 0 0.21rem;
}
#store a {
  color: #ff6c4e;
  font-size: 0.22rem;
}
.self {
  background: #fff;
  margin-bottom: 0.4rem;
}
.self li {
  height: 2.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.2rem 0.2rem;
}
.self li .circle {
  color: #ff6040;
}
.self li img {
  width: 2.6rem;
  margin-right: 0.1rem;
}
.self li .content {
  height: 100%;
}
.self li .content h3 {
  color: #333333;
  font-size: 0.3rem;
  margin-bottom: 0.06rem;
}
.self li .content p {
  color: #999999;
}
.self li .content .capacity {
  width: 1.8rem;
  height: 0.32rem;
  background: #f2f2f2;
  color: #3b3b3b;
  font-size: 0.18rem;
  line-height: 0.32rem;
  margin: 0.31rem 0 0.12rem;
}
.self li .content .capacity span {
  font-size: 0.14rem;
}
.self li .content .price {
  display: flex;
  color: #333333;
  align-items: center;
}
.self li .content .price em {
  font-size: 0.14rem;
  color: #ff6040;
}
.self li .content .price del {
  color: #999999;
  margin: 0 0.86rem 0 0.07rem;
}
.self li .content .price i {
  color: #ff6040;
  font-size: 0.3rem;
}
.self li .content .price span {
  width: 0.8rem;
  height: 0.4rem;
  background: #f2f2f2;
  text-align: center;
  line-height: 0.4rem;
  margin: 0 0.12rem;
}
.self li .content .limit {
  color: #ff8066;
  font-size: 0.18rem;
  box-sizing: border-box;
  margin: 0.2rem 0;
}
.sift {
  background: #fff;
}
.sift li {
  height: 2.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.2rem 0.2rem;
}
.sift li b {
  width: 0.32rem;
  height: 0.32rem;
  border: 1px solid #999999;
  border-radius: 50%;
  background: #f2f2f2;
  margin-right: 0.1rem;
}
.sift li img {
  width: 2.6rem;
  margin-right: 0.25rem;
}
.sift li .commodity {
  height: 100%;
}
.sift li .commodity h3 {
  color: #333333;
  font-size: 0.3rem;
}
.sift li .commodity p {
  color: #999999;
}
.sift li .commodity em {
  font-size: 0.14rem;
}
.sift li .commodity del {
  margin: 0 0.2rem 0 0.07rem;
}
.sift li .commodity i {
  color: #ff6040;
  font-size: 0.3rem;
}
.sift li .commodity span {
  margin-right: 0.22rem;
}
.sift li .commodity .limit {
  padding-left: 0.07rem;
  width: 2.5rem;
  height: 0.33rem;
  background: #ff8066;
  line-height: 0.33rem;
  color: #fff;
  font-size: 0.18rem;
  box-sizing: border-box;
  margin: 0.2rem 0;
}
.sift li .commodity .price {
  margin-top: 0.2rem;
}
#close {
  border-top: 1px solid #cccccc;
  display: flex;
  height: 0.98rem;
  background: #fff;
  /* margin-bottom: 0.1rem; */
  position: fixed;
  bottom: 50px;
  width: 100%;
}
#close p {
  width: 5.3rem;
  height: 0.98rem;
  padding: 0 0.12rem 0 0.1rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  color: #333333;
  font-size: 0.3rem;
}
#close p i {
  width: 0.32rem;
  height: 0.32rem;
  border: 1px solid #999999;
  border-radius: 50%;
  background: #f2f2f2;
  margin-right: 0.1rem;
}
#close p .center {
  margin: 0 0.1rem 0 0.8rem;
}
#close p span {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #a5a5a5;
  font-size: 0.18rem;
}
#close p span em {
  font-size: 0.3rem;
  color: #333333;
}
#close p span b {
  font-size: 0.3rem;
  color: #ff6040;
}
#close a {
  width: 2.2rem;
  background: #ff6040;
  line-height: 0.98rem;
  text-align: center;
  color: #fff;
  font-size: 0.3rem;
  font-weight: bold;
}
footer {
  display: flex;
  height: 1.66rem;
  background: #fff;
  border-top: 1px solid #cccccc;
  padding: 0 0.72rem;
  box-sizing: border-box;
  justify-content: space-between;
}
footer p {
  color: #999999;
  height: 1.66rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
footer p .iconfont {
  font-size: 0.4rem;
}
footer p span {
  font-size: 0.18rem;
}
footer .cur {
  color: #ff6040;
}
</style>